
/* ==================
          边框
 ==================== */

/* -- 实线 -- */
.border, .border-top, .border-right, .border-bottom, .border-left, .borders,
.borders-top, .borders-right, .borders-bottom, .borders-left, 
.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids,
.solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top,
.dashed-right, .dashed-bottom, .dashed-left {
  position: relative;
}



.border::after, .border-top::after, .border-right::after, .border-bottom::after,
.border-left::after, .borders::after, .borders-top::after, .borders-right::after,
.borders-bottom::after, .borders-left::after, 

.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after,
.solid-left::after, .solids::after, .solids-top::after, .solids-right::after,
.solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after,
.dashed-right::after, .dashed-bottom::after, .dashed-left::after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
  box-sizing: border-box;
}

.solid::after,.border::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.solid-top::after,.border-top::after {
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.solid-right::after,.border-right::after {
  border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.solid-bottom::after,.border-bottom::after {
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.solid-left::after,.border-left::after {
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.solids::after,.borders::after {
  border: 2px solid #eee;
}

.solids-top::after.borders-top::after {
  border-top: 2px solid #eee;
}

.solids-right::after,.boders-right::after {
  border-right: 2px solid #eee;
}

.solids-bottom::after,.borders-bottom::after {
  border-bottom: 2px solid #eee;
}

.solids-left::after,.borders-left::after {
  border-left: 2px solid #eee;
}

/* -- 虚线 -- */

.dashed::after {
  border: 2px dashed #ddd;
}

.dashed-top::after {
  border-top: 2px dashed #ddd;
}

.dashed-right::after {
  border-right: 2px dashed #ddd;
}

.dashed-bottom::after {
  border-bottom: 2px dashed #ddd;
}

.dashed-left::after {
  border-left: 2px dashed #ddd;
}

/* -- 阴影 -- */

.shadow {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.07);
}

.shadow-warp {
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.shadow-warp:before, .shadow-warp:after {
  position: absolute;
  content: "";
  top: 10px;
  bottom: 15px;
  left: 10px;
  width: 50%;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
  transform: rotate(-3deg);
  z-index: -1;
}

.shadow-warp:after {
  right: 10px;
  left: auto;
  transform: rotate(3deg);
}

.shadow-blur {
  position: relative;
}

.shadow-blur::before {
  content: "";
  display: block;
  background: inherit;
  filter: blur(5px);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 5px;
  left: 5px;
  z-index: -1;
  opacity: 0.4;
  transform-origin: 0 0;
  border-radius: inherit;
  transform: scale(1, 1);
}
